<template>
  <h1>商品发布</h1>
  <el-form :model="editObj">
    <el-form-item label="商品名称" :label-width="formLabelWidth">
      <el-input v-model="editObj.proname" autocomplete="off" />
    </el-form-item>
    <el-form-item label="category" :label-width="formLabelWidth">
      <el-input v-model="editObj.category" autocomplete="off" />
    </el-form-item>
    <el-form-item label="desc" :label-width="formLabelWidth">
      <el-input v-model="editObj.desc" autocomplete="off" />
    </el-form-item>
    <el-form-item label="是否在售" :label-width="formLabelWidth">
      <el-switch
        v-model="editObj.issale"
        autocomplete="off"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>
    <el-form-item label="imgs" :label-width="formLabelWidth">
      <!-- 上传图片组件 -->
      <!-- https://cn.element-plus.org/zh-CN/component/upload.html#%E7%85%A7%E7%89%87%E5%A2%99 -->
      <!-- v-model:file-list  图片墙组件的 图片的数据源数组 -->
      <!-- action  是一个地址，上面图片接口-->
      <el-upload
        v-model:file-list="fileList"
        action="http://localhost:3001/admin/file/upload"
        name="img"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <!-- 预览弹框 -->
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>

    <div class="dialog-footer">
      <el-button @click="resetFn()">取消</el-button>
      <el-button type="primary" @click="editSaveFn"> 确定 </el-button>
    </div>
  </el-form>
</template>
<script setup lang="ts">
// import {} from '@/api/product'
import { ref } from 'vue'
interface IProductItem {
  proname: string
  category: string
  desc: string
  issale: number
  imgs: Array<string>
  proid: string
}

const formLabelWidth = '100px'
const editObj = ref<IProductItem>({
  proname: '',
  proid: '',
  category: '',
  desc: '',
  issale: 1,
  imgs: [],
})

// 编辑--保存功能
async function editSaveFn() {
  //调用保存接口--隐藏弹框
  //修改以后的数据 对象
  // debugger
  // ----把filelist 数据--》转为  imgs中数据

  // ps: 使用upload上传文件，组件会在filelist添加一个对象，这个对象中url属性不是服务器返回的图片的网址，是临时二进制图片地址，添加的这个对象中，有个一response属性，里面的fileUrl 属性才是服务器返回的真实的图片地址
  editObj.value.imgs = fileList.value.map(v => {
    //如果v。response属性存在，说明这个图片是刚刚上传的
    if (v.response) {
      // 返回上传成功以后的图片地址
      return v.response?.fileUrl
    } else {
      // 图片是已经存在图片
      return v.url
    }
  })

  console.log(editObj.value)
  productPubReq(editObj.value).then(r => {
    console.log(r.data)
    ElMessage({
      message: '发布成功',
      type: 'success',
    })
    resetFn()
  })
}

// 编辑--上传图片--
import { ElMessage, type UploadProps, type UploadUserFile } from 'element-plus'
import { productPubReq } from '@/api/product'
// 图片墙列表数据
const fileList = ref<UploadUserFile[]>([
  // **图片墙的数组-中元素格式是规定的
  // name 属性 图片命名 随便
  // url  图片的地址
  // {
  //   name: 'food.jpeg',
  //   url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  // },
])

// 控制预览弹框的图片地址
const dialogImageUrl = ref('')
// 预览弹框的显示和隐藏
const dialogVisible = ref(false)

// 图片墙里面的删除按钮
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}
// 图片里面的预览按钮的点击事件
const handlePictureCardPreview: UploadProps['onPreview'] = uploadFile => {
  // 把点击的图片的地址，存入，弹框中img的地址
  dialogImageUrl.value = uploadFile.url!
  // 弹框出现
  dialogVisible.value = true
}

function resetFn() {
  editObj.value = {
    proname: '',
    proid: '',
    category: '',
    desc: '',
    issale: 1,
    imgs: [],
  }

  fileList.value = []
}
</script>
<style lang=""></style>
